<script setup>
import { useUser } from '@/composables/useUser'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import Subscription from '@/components/Subscription.vue'
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import useLocale from '@/composables/useLocale'

const store = useStore()
const user = useUser()
const subscriptionPopupRef = ref(null)
const { t, locale } = useLocale()

function handleSubscriptionClick() {
    // #ifdef WEB
    subscriptionPopupRef.value?.open()
    // #endif
    // #ifndef WEB
    uni.navigateTo({ url: '/pages/subscription' })
    // #endif
}

const locales = {
    'zh-CN': {
        label: '简体中文',
        value: 'zh-CN',
    },
    en: {
        label: 'English',
        value: 'en',
    },
}

watch(
    locale,
    () => {
        uni.setNavigationBarTitle({
            title: t('settings'),
        })
    },
    { immediate: true },
)

function hanndleLanguageClick() {
    uni.showActionSheet({
        itemList: Object.values(locales).map((locale) => locale.label),
        success: (res) => {
            locale.value = Object.values(locales)[res.tapIndex].value
        },
    })
}

const accountFields = computed(() => ({
    phone: {
        label: t('phone'),
        icon: '\ue9e1',
        value: user.value.phone ?? '未绑定',
        url: '/pages/settings/change-phone',
    },
    email: {
        label: t('email'),
        value: user.value.email || t('notBound'),
        icon: '\ue99a',
        url: '/pages/settings/change-email',
    },
    subscription: {
        label: t('subscription'),
        value: 'ChatGPT Plus',
        icon: '\ue987',
        onClick: handleSubscriptionClick,
    },
    // dataControls: {
    //     label: '数据控制',
    //     icon: '\ue901',
    // },
    // customInstructions: {
    //     label: t('customInstructions'),
    //     icon: '\ue95b',
    //     url: '/pages/settings/custom-instruction',
    // },
    archiveRoom: {
        label: t('archiveRoom'),
        icon: '\ue905',
        url: '/pages/room/search?archive=1',
    },
    language: {
        label: t('language'),
        icon: '\ue9c1',
        value: locales[locale.value].label,
        onClick: hanndleLanguageClick,
    },
}))

const aboutFields = {
    // help: {
    //     label: '帮助中心',
    //     icon: '\ue9ef',
    // },
    // termOfUse: {
    //     label: '使用条款',
    //     icon: '\ue994',
    // },
    // privacyPolicy: {
    //     label: '隐私政策',
    //     icon: '\ue9fe',
    // },
    // licenses: {
    //     label: '许可证',
    //     icon: '\ue970',
    // },
}

function handleSignout() {
    store.dispatch('user/signout')
}

function goToPage(url) {
    uni.navigateTo({ url })
}
</script>
<template>
    <view class="pb-4">
        <view class="flex items-center p-3">
            <image
                v-if="user.avatar"
                :src="user.avatar"
                class="size-10 rounded-full"
                mode="aspectFill"
            />
            <view v-else class="size-10 rounded-full bg-amber-700"></view>
            <view class="ml-3">{{ user.nickname }}</view>
        </view>
        <view>
            <view class="p-3 font-bold">{{ t('account') }}</view>
            <view
                v-for="(
                    { label, value, icon, url, onClick }, name
                ) in accountFields"
                :key="name"
                class="flex cursor-pointer items-center p-3"
                @click="onClick ? onClick() : goToPage(url)"
            >
                <uni-icons
                    font-family="heroicons-outline"
                    :size="24"
                    color="#3f3f46"
                >
                    {{ icon }}
                </uni-icons>
                <view class="ml-3">
                    <view class="text-zinc-700">{{ label }}</view>
                    <view class="text-sm text-zinc-500">
                        {{ value }}
                    </view>
                </view>
            </view>
        </view>
        <view>
            <view class="p-3 font-bold">{{ t('about') }}</view>
            <view
                v-for="({ label, icon }, name) in aboutFields"
                :key="name"
                class="flex items-center p-3"
            >
                <uni-icons
                    font-family="heroicons-outline"
                    :size="24"
                    color="#3f3f46"
                >
                    {{ icon }}
                </uni-icons>
                <view class="ml-3 text-zinc-700">{{ label }}</view>
            </view>
            <view class="flex items-center p-3">
                <uni-icons type="circle" :size="24" color="#3f3f46" />
                <view class="ml-3 text-zinc-700">
                    <view>ChatAI Plus</view>
                    <view class="text-sm text-zinc-500">0.0.1</view>
                </view>
            </view>
            <navigator url="/pages/auth/index">
                <view class="flex items-center p-3">
                    <uni-icons
                        font-family="heroicons-outline"
                        :size="24"
                        color="#b91c1c"
                    >
                        {{ '\ue919' }}
                    </uni-icons>
                    <view class="ml-3 text-red-700" @click="handleSignout">
                        {{ t('logout') }}
                    </view>
                </view>
            </navigator>
        </view>
        <uni-popup ref="subscriptionPopupRef" type="center">
            <view class="w-[90vw] rounded-3xl bg-white md:w-[60vw] lg:w-[45vw]">
                <Subscription />
            </view>
        </uni-popup>
    </view>
</template>
